const { createApp } = Vue;

createApp({
    data() {
        return {
            features: [
                {
                    icon: 'fas fa-user-md',
                    title: '专业团队',
                    description: '资深心理咨询师团队，为您提供专业的心理支持'
                },
                {
                    icon: 'fas fa-shield-alt',
                    title: '隐私保护',
                    description: '严格的隐私保护机制，保障您的个人信息安全'
                },
                {
                    icon: 'fas fa-clock',
                    title: '灵活预约',
                    description: '线上线下结合，随时随地进行心理咨询'
                },
                {
                    icon: 'fas fa-heart',
                    title: '温暖服务',
                    description: '以人为本，为您提供贴心、温暖的咨询服务'
                }
            ],
            stats: [
                { value: 0, current: 0, suffix: '+', label: '服务用户' },
                { value: 0, current: 0, suffix: '+', label: '专业咨询师' },
                { value: 0, current: 0, suffix: '%', label: '用户满意度' },
                { value: 0, current: 0, suffix: '+', label: '咨询小时' }
            ],
            loading: {
                stats: false
            },
            error: null
        };
    },
    async mounted() {
        await this.fetchStats();
        this.observeElements();
        this.startAutoSlide();
    },
    methods: {
        async fetchStats() {
            try {
                this.loading.stats = true;
                this.error = null;
                const response = await axios.get('/api/stats/overview');

                if (response.data.code === "200") {
                    const data = response.data.data;
                    // 更新统计数据
                    this.stats = [
                        {
                            value: parseInt(data.userCount) || 0,
                            current: 0,
                            suffix: '+',
                            label: '服务用户'
                        },
                        {
                            value: parseInt(data.therapistCount) || 0,
                            current: 0,
                            suffix: '+',
                            label: '专业咨询师'
                        },
                        {
                            value: parseInt(data.satisfactionRate) || 0,
                            current: 0,
                            suffix: '%',
                            label: '用户满意度'
                        },
                        {
                            value: parseInt(data.consultationHours) || 0,
                            current: 0,
                            suffix: '+',
                            label: '咨询小时'
                        }
                    ];
                    // 触发数字动画
                    this.$nextTick(() => {
                        document.querySelectorAll('.stat-number').forEach((el, index) => {
                            this.animateNumber(el);
                        });
                    });
                } else {
                    throw new Error(response.data.message || '获取统计数据失败');
                }
            } catch (error) {
                console.error('获取统计数据失败:', error);
                this.error = '获取统计数据失败，请刷新页面重试';
            } finally {
                this.loading.stats = false;
            }
        },
        observeElements() {
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('visible');
                        if (entry.target.classList.contains('stat-number')) {
                            this.animateNumber(entry.target);
                        }
                    }
                });
            }, { threshold: 0.2 });

            document.querySelectorAll('.animate-on-scroll').forEach(el => {
                observer.observe(el);
            });
        },
        animateNumber(element) {
            const index = element.dataset.index;
            const stat = this.stats[index];
            if (!stat || stat.current >= stat.value) return;

            const duration = 2000;
            const steps = 60;
            const increment = stat.value / steps;
            let current = 0;

            const timer = setInterval(() => {
                current += increment;
                if (current >= stat.value) {
                    stat.current = stat.value;
                    clearInterval(timer);
                } else {
                    stat.current = Math.floor(current);
                }
            }, duration / steps);
        }
    }
}).mount('#app'); 